<template>
	<div>
		<SearchHeader>
			<template v-slot:title>
				<input
					class="search-input-bind"
					type="text"
					v-model="searchVal"
					placeholder="输入景点/目的地"
				/>
			</template>
			<template v-slot:right
				><span @click="searchFn">&nbsp;搜索&nbsp;</span></template
			>
		</SearchHeader>
		<div class="mp-main">
			<div
				class="mp-tagfilter-outer"
				:class="{ 'mp-tagfilter-unfold': more }"
			>
				<h3 class="mp-tagfilter-title mpf-border-bottom">
					游玩景点<span class="mp-tagfilter-subtitle">(可多选)</span>
				</h3>

				<div class="mp-tagfilter-list">
					<ul class="mp-tagfilter-inner">
						<li
							class="mp-tagfilter-item"
							v-for="item in 40"
						>
							<span class="mp-tagfilter-name mpf-border">八达岭长城</span>
						</li>
						<li
							class="mp-tagfilter-item"
							v-for="item in 6"
						>
							<span class="mp-tagfilter-name mpf-border">月亮山</span>
						</li>
					</ul>
				</div>
				<div
					class="mp-tagfilter-exand"
					@click="moreSight"
				>
					<van-icon
						name="arrow-down"
						v-show="!more"
					/>
					<van-icon
						name="arrow-up"
						v-show="more"
					/>
				</div>
			</div>
			<div
				style="
					position: sticky;
					top: 52px;
					z-index: 10;
					background-color: #f0f5f8;
					color: #f98c18;
					padding: 10px;
					margin-top: 5px;
					margin-bottom: 5px;
					font-weight: bold;
				"
			>
				去app享受更低价
			</div>

			<div>
				<ul>
					<SearchList v-for="item in 10" />
				</ul>
			</div>
		</div>
		<div class="page">
			<van-button
				plain
				hairline
				type="primary"
				size="small"
				>上一页</van-button
			>
			<span class="page-text">1/10</span>
			<van-button
				plain
				hairline
				type="primary"
				size="small"
				>下一页</van-button
			>
		</div>

		<div
			class="dock"
			:class="{ 'dock-hidden': dockHidden }"
		>
			<div class="type-filter-item"><span>筛选</span></div>
			<div class="type-filter-item"><span>推荐排序</span></div>
		</div>

		<div
			class="mp-menu-mask"
			@click="more = false"
			v-show="more"
		></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				more: false,
				searchVal: '',

				dockHidden: false, // 初始状态设置为显示
				prevScrollPosition: 0, // 用于跟踪上一个滚动位置
			};
		},
		components: {
			SearchHeader: () => import('./component/SearchView.vue'),
			SearchList: () => import('./component/SearchList.vue'),
		},

		computed: {
			titleStyle() {},
		},

		methods: {
			searchFn() {
				console.log('搜索');
			},

			moreSight() {
				this.more = !this.more;
			},

			handleScroll() {
				// 获取当前页面顶部距离
				const topDistance =
					window.pageYOffset || document.documentElement.scrollTop;

				// 设置一个阈值，以便确定何时开始显示/隐藏 Dock 栏
				const threshold = 200;

				// 检测滚动方向
				if (topDistance > this.prevScrollPosition) {
					// 向下滚动，隐藏 Dock 栏
					this.dockHidden = true;
				} else {
					// 向上滚动，显示 Dock 栏
					this.dockHidden = false;
				}

				// 更新上一个滚动位置
				this.prevScrollPosition = topDistance;
			},
		},

		mounted() {
			window.addEventListener('scroll', this.handleScroll);
			console.log(this.$route.query);
			this.searchVal = this.$route.query.id;
		},
		beforeDestroy() {
			window.removeEventListener('scroll', this.handleScroll);
		},
	};
</script>

<style scoped>
	.search-input-bind {
		position: relative;
		display: block;
		width: 100%;
		height: 0.4rem;
		line-height: 20px;
		padding: 5px 0;
		background: #f2f2f2;
		border: 0;
		font-family: 'Microsoft Yahei', Arial;
		font-size: 14px;
		border-radius: 3px;
		text-align: center;
		color: #212121;
	}

	.mp-main {
		margin-top: 1.5rem;
	}

	.mp-tagfilter-outer {
		position: relative;
		box-sizing: border-box;
		height: 40px;
		background: rgb(229, 231, 232);
		width: 100%;
	}

	.mp-tagfilter-container {
		background: rgb(229, 231, 232);
	}

	.mp-tagfilter-list {
		line-height: 14px;
		background-color: rgb(229, 231, 232);
		max-height: 300px;
		height: 100%;
		padding: 4px 6px;
		overflow: hidden;
		margin-right: 30px;
		box-sizing: border-box;
	}

	.mp-tagfilter-inner {
		display: flex;
		align-items: center;
		height: 100%;
		width: 100%;
		overflow: auto;
	}

	.mp-tagfilter-item {
		padding: 2px 4px;
		flex-shrink: 0;
	}

	.mp-tagfilter-name {
		line-height: 14px;
		display: block;
		font-size: 13px;
		border-radius: 2px;
		line-height: 28px;
		min-width: 13px;
		padding: 0 13px;
		background: #fff;
	}

	.mp-tagfilter-exand {
		background-color: rgb(229, 231, 232);
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: 41px;
		font-size: 14px;
		text-align: center;
		line-height: 40px;
	}

	.mp-tagfilter-title {
		color: #212121;
		font-size: 14px;
		line-height: 40px;
		text-indent: 10px;
		display: none;
	}

	.mp-tagfilter-subtitle {
		font-size: 12px;
		text-indent: 10px;
	}

	.mpf-border-bottom::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		border: solid rgb(215, 219, 222) 0.8px;
	}

	.mp-tagfilter-unfold {
		position: fixed;
		top: 2.3rem;
		left: 0;
		z-index: 1;
	}
	.mp-tagfilter-unfold .mp-tagfilter-list {
		height: 300px;
		position: absolute;
		top: 40px;
		left: 0;
		margin: 0;
		/* padding: 0; */
		box-sizing: border-box;
		z-index: 9;
		border-radius: 0 0 5px 5px;
	}

	.mp-tagfilter-unfold .mp-tagfilter-exand {
		/* display: none; */
	}

	.mp-tagfilter-unfold .mp-tagfilter-inner {
		flex-wrap: wrap;
		justify-content: start;
		align-content: start;
		gap: 4px;
	}

	.mp-tagfilter-unfold .mp-tagfilter-title {
		display: block;
	}

	.page {
		margin: 20px 0 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		background-color: #e0e0e0;
		height: 80px;
	}

	.page-text {
		font-size: 16px;
		padding: 0 10px;
	}

	.van-button {
		border-radius: 4px;
		font-size: 16px;
		padding: 0 15px;
		margin: 0 5px;
		cursor: pointer;
	}

	.van-button:hover {
		font-weight: 700;
	}

	.mp-menu-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.55);
	}

	.mp-type-filter {
	}

	.type-filter-item {
		width: 50%;
		color: #e0e0e0;
		text-align: center;
	}

	.dock {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 40px;
		background: rgba(0, 0, 0, 0.55);
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9;
		transition: transform 0.5s;
	}

	.dock.dock-hidden {
		transform: translateY(100%);
		transition: transform 0.5s;
	}
</style>
